<template>
    <div class="app-container">

      <div class="filter-container">
        <el-select v-model="readChoice" placeholder="过滤" clearable class="filter-item" style="width: 130px">
          <el-option v-for="item in readList" :key="item.key" :label="item.name" :value="item.key" />
        </el-select>
        <el-button class="filter-item" type="primary" :loading="loading" icon="el-icon-search" @click="handleReadChoice">
          Search
        </el-button>
      </div>

    <!--查看列表数据-->
    <el-table :data="tableData" class="data_table" style="width: 100%;">
      <el-table-column prop="ID" label="通知编号" width="100">
        <template slot-scope="{row}">
          <span>{{ row.noticeId }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="info" label="通知信息" width="150">
        <template slot-scope="{row}">
          <span>{{ row.noticeInfo }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="state" label="通知状态" width="100">
        <template slot-scope="{row}">
          <span>{{ row.noticeState }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="通知类型" width="100">
        <template slot-scope="{row}">
          <span>{{ row.noticeType }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="time" label="通知时间" width="250">
        <template slot-scope="{row}">
          <el-date-picker ref="date" type="datetime" v-model="row.noticeTime" readonly />
        </template>
      </el-table-column>
      <el-table-column label="Actions" align="center" width="120" class-name="seeMore">
        <template slot-scope="{row}">
          <el-button v-waves class="filter-item" type="primary" @click="seeMore(row)">
            查看详情
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="Actions" align="center" width="120" class-name="seeBaojia">
        <template slot-scope="{row}">
          <el-button v-waves class="filter-item" type="primary" :disabled="row.noticeState == '已读'" @click="updateState(row)">
            标为已读
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="Actions" align="center" width="120" class-name="deleteOrder">
        <template slot-scope="{row}">
          <el-button v-waves class="filter-item" type="primary" @click="deleteNotice(row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--查看详情界面-->
    <el-dialog title="通知详情" :visible.sync="seemoreVisible">
      <el-form ref="dataForm" :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
        <el-form-item label="通知编号" prop="id">
          <el-input v-model="temp.noticeId" readonly />
        </el-form-item>
        <el-form-item label="通知信息" prop="info">
          <textarea v-model="temp.noticeInfo" style="margin: 0px; width: 330px; height: 100px;" readonly />
        </el-form-item>
        <el-form-item label="通知状态" prop="state">
          <el-input v-model="temp.noticeState" readonly />
        </el-form-item>
        <el-form-item label="通知类型" prop="type">
          <el-input v-model="temp.noticeType" readonly />
        </el-form-item>
        <el-form-item label="通知时间" prop="time">
          <el-date-picker ref="date" type="datetime" v-model="temp.noticeTime" readonly />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="seemoreVisible = false">
          返回
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
import waves from '@/directive/waves' // waves directive
import request from '@/utils/request'
export default {
  name: 'Notice',
  directives: { waves },
  data() {
    return {
      userId: '',
      userName: '',
      tableData: [],
      temp: {
        noticeId: 0,
        noticeInfo: '',
        noticeState: 0,
        noticeType: 0,
        noticeTime: ''
      },
      seemoreVisible: false,
      readChoice: '过滤',
      loading: false,
      readList: [
        {
          name: '未读',
          key: 0
        },
        {
          name: '已读',
          key: 1
        },{
          name: '全部',
          key: 2
        }
      ]
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    handledata(data) {
      let noticedata = data
      for(let i=0;i<noticedata.length;i++) {
        if(noticedata[i].noticeState == 0){
          noticedata[i].noticeState = '未读'
        }
        else {
          noticedata[i].noticeState = '已读'
        }
        noticedata[i].noticeType = '系统通知'
        // if(noticedata[i].noticeType == 0){
        //   noticedata[i].noticeType = '系统通知'
        // }
        // else {
        //   noticedata[i].noticeType = '私信'
        // }
      }
      this.tableData = noticedata
    },
    init() {
      this.userId = JSON.parse(sessionStorage.getItem('user')).userId
      this.userName = JSON.parse(sessionStorage.getItem('user')).userName
      request.get('/Notice/selectOfCustomer/' + this.userId).then(request=>{
        var resdata=request.data
        let noticedata = resdata.data
        this.handledata(noticedata)
        // alert('OK')
      }).catch(()=>{
        this.$message.error('获取数据出错，请联系管理员！')
        return
      })
    },
    seeMore(row) {
      this.temp = Object.assign({}, row)
      this.seemoreVisible = true
    },
    handleReadChoice() {
      if(this.readChoice == '过滤') {
        this.$message.warning('请选择过滤方式！')
        return
      }
      this.loading = true
      if(this.readChoice == 0) {
        request.get('/Notice/selectUnreadOfCustomer/' + this.userId).then(request=>{
          var resdata=request.data
          this.loading = false
          this.$message.success('获取数据成功！')
          this.handledata(resdata.data)
        }).catch(()=>{
          this.$message.error('获取数据出错，请联系管理员！')
          return
        })
      }
      else if(this.readChoice == 1) {
        request.get('/Notice/selectReadOfCustomer/' + this.userId).then(request=>{
          var resdata=request.data
          this.loading = false
          this.$message.success('获取数据成功！')
          this.handledata(resdata.data)
        }).catch(()=>{
          this.$message.error('获取数据出错，请联系管理员！')
          return
        })
      }
      else {
        this.init()
        this.loading = false
        this.$message.success('获取数据成功！')
      }

    },
    updateState(row) {
      request.post('/Notice/updatestate/' + row.noticeId).then(request=>{
        let resdata = request.data
        if(resdata.code === 200) {
          this.$message.success(resdata.message)
          this.init()
        }else {
          this.$message.error(resdata.message)
        }
      }).catch(()=>{
        this.$message.error('获取数据出错，请联系管理员！')
        return
      })
    },
    deleteNotice(row) {
      request.post('/Notice/delete/' + row.noticeId).then(request=>{
        let resdata = request.data
        if(resdata.code === 200) {
          this.$message.success(resdata.message)
          this.init()
        }else {
          this.$message.error(resdata.message)
        }
      }).catch(()=>{
        this.$message.error('获取数据出错，请联系管理员！')
        return
      })
    }
  }
}
</script>

<style>
</style>
